<template>
  <Modal v-model="showPermission"
         :footer-hide="true"
         :closable="true"
         title="添加权限"
  >
    <Form ref="addForm" :model="permission" label-position="left"
          :label-width="100" :rules="rules"
          @keydown.enter.native="formSubmit">
      <FormItem label="权限名称" prop="permissionName">
        <Input v-model="permission.permissionName" type="text"></Input>
      </FormItem>
      <FormItem label="权限编码" prop="permissionCode">
        <Input v-model="permission.permissionCode" type="text"></Input>
      </FormItem>
      <FormItem label="权限描述" prop="description">
        <Input v-model="permission.description" type="text"></Input>
      </FormItem>
      <FormItem label="父级权限" prop="parent">
        <Select v-model="permission.parent">
          <Option v-for="i in permissionList" :value="i.id">{{ i.permissionName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="启用状态" prop="status">
        <RadioGroup  type="button" v-model="permission.status">
          <Radio label="Enable" value="200">启用</Radio>
          <Radio label="Disable" value="500">禁用</Radio>
          <Radio label="Lock" value="400">锁定</Radio>
          <Radio label="Unlock" value="402">解除锁定</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem class="right">
        <Button type="primary" class="rapper" @click="formSubmit">确定</Button>
        <Button type="info" class="rapper" @click="formCancel">取消</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import {addPermission,getPermissionData} from "@/api/data";

export default {
  name: "AddPermission",
  data() {
    return {
      permission: {
        permissionName: '',
        permissionCode: '',
        description: '',
        parent:'',
        status:''
      },
      permissionList:[],
      showPermission: false
    }
  },
  props: {
    permissionNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入权限名称', trigger: 'blur'}
        ]
      }
    },
    permissionCodeRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入权限编码', trigger: 'blur'}
        ]
      }
    },
    descriptionRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入权限描述', trigger: 'blur'}
        ]
      }
    },
    parentRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请选择父级权限', trigger: 'change',type:'number'}
        ]
      }
    },
    statusRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请勾选状态', trigger: 'blur'}
        ]
      }
    },
  },
  computed: {
    rules() {
      return {
        permissionName: this.permissionNameRules,
        permissionCode: this.permissionCodeRules,
        description: this.descriptionRules,
        parent:this.parentRules,
        status:this.statusRules
      }
    }
  },
  methods: {
    showModal(){
      this.showPermission = true;
    },
    formSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addPermission(this.permission).then(res => {
            let data = res.data;
            if (data && data.code === 200) {
              this.$Message.success("添加成功！");
              this.$emit("refresh")
            } else {
              this.$Message.error(data.message);
            }
            this.showPermission = false
          })
        }
      });
    },
    formCancel() {
      this.showPermission = false
      this.$Message.info("取消添加用户！");
    },
    getAllPermission(){
      getPermissionData().then(res => {
        let data = res.data;
        if (data && data.code === 200) {
          this.permissionList = data.object;
        } else {
          this.$Message.error(data.message);
          this.showPermission = false
        }
      })
      this.permissionList.push({id:-1,permissionName: "顶级"});
    }
  },
  mounted() {
    this.getAllPermission()
  }
}
</script>

<style scoped>
.right {
  text-align: right
}

.rapper {
  margin: 0 2px;
}
</style>
